<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
  <meta charset="utf-8">
  <title>Amusementpark-OS</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
	<link rel="stylesheet" th:href="@{/plugin/layui/css/modules/code.css}" media="all">
	<link rel="stylesheet" th:href="@{/plugin/layui/css/modules/layer/default/layer.css}" media="all">
	<script th:src="@{/plugin/vue/axios.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/plugin/vue/vue.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/plugin/jquery.min.js}" charset="utf-8"></script>
</head>
<body>
    <!--
       注意：交接班 页面布局还需修改
    -->
	<div id="app" class="layui-container" style="margin-top: 30px;">
		<!-- 交接班-信息 -->
		<div class="layui-col-md6 layui-bg-gray" style="height: 500px;border:#40AFFE 2px solid ;">
			
			<div class="layui-col-md12">
				<!-- 交接班基础信息 -->
				<form class="layui-form" action="" method="post" style="margin-top: 20px;">
					<!-- 交班时间 -->
					<div class="layui-form-item">
						<label class="layui-form-label">交班时间</label>
						<div class="layui-input-inline">
							<input type="text" id="mytime3" name="name" required lay-verify="required"
							 value="" autocomplete="off" class="layui-input"/>
						</div>
					</div>
					
					<!-- 柜台编号-->
					<div class="layui-form-item">
						<input type="hidden" name="shiftExchangeBarNumberFore" required lay-verify="required"
							  v-model="shiftExchangeBarNumberFore"  value="" autocomplete="off" class="layui-input"/>

						<label class="layui-form-label">柜台编号</label>
						<div class="layui-input-inline">
							<input type="text" name="counter_name" required lay-verify="required"
							 v-model="counter_name" value="" autocomplete="off" class="layui-input"/>
						</div>		
					</div>
					
					<!-- 调整类型 -->
					<div class="layui-form-item">
						<input type="hidden" name="shiftExchangeUserFore" required lay-verify="required"
							   v-model="shiftExchangeUserFore"  value="" autocomplete="off" class="layui-input"/>

						<label class="layui-form-label">交班人员</label>
						<div class="layui-input-inline">
							<input type="text" name="user_account" required lay-verify="required"
							 v-model="user_account" value="" autocomplete="off" class="layui-input"/>
						</div>
					</div>
				</form>
			</div>
			
			<!-- 当前柜台收入金额 -->
			<div class="layui-col-md12 layui-bg-orange" style="height: 320px;">
				<!-- 标题 -->
				<div class="layui-col-md12 layui-bg-blue" style="height: 30px;line-height: 30px;padding-left: 5px;" >
					当前柜台收入金额
				</div>
				<div class="layui-bg-gray layui-col-md12" style="height: 290px;">
					<form class="layui-form" action="" method="post" style="padding-top: 20px;">
						<!-- 当前柜台现金总额：手输 -->
						<div class="layui-form-item">
							<label class="layui-form-label">现金</label>
							<div class="layui-input-inline">
								<input type="text" name="shiftExchangeCashFore" required lay-verify="required"
								v-model="shiftExchangeCashFore" value="" autocomplete="off" class="layui-input"/>
							</div>
						</div>
						
						<!-- 当前柜台现金总额：回显 -->
						<div class="layui-form-item">
							<label class="layui-form-label">支付宝</label>
							<div class="layui-input-inline">
								<input type="text" name="shiftExchangeAlipayFore" required lay-verify="required"
								 v-model="shiftExchangeAlipayFore" value="" autocomplete="off" class="layui-input" disabled="disabled"/>
							</div>
						</div>
						
					</form>
				</div>
			</div>
			
					
			
		</div>
		
		<!-- 金额调整 -->
		<div class="layui-col-md6 layui-bg-gray" style="height: 500px;border:#40AFFE 2px solid ;">
			
			<!-- 交接班信息选择 -->
			<div class="layui-col-md12" style="margin-top: 20px;margin-left: 10px;margin-bottom: 30px">
				<!-- 打印交班信息
				height: 60px; width: 482px; text-align: center;line-height: 60px;margin: 10px;
				 -->
				<div class="layui-col-md4" style="">
					<!--打印交班信息-->
<!--					<button type="button" class="layui-btn layui-btn-lg layui-btn-danger" style="">打印交班信息</button>-->
				</div>
				<!-- 确定 -->
				<div class="layui-col-md2" style="margin-right: 10px">
					<button @click="insertForm" type="button" class="layui-btn layui-btn-lg layui-btn-normal" style="">确定</button>
				</div>
				<!-- 关闭 -->
				<div class="layui-col-md2" style="">
					<button type="button" class="layui-btn layui-btn-lg layui-btn-danger" style="">关闭</button>
				</div>
			</div>
			
			<!-- 键入数字 -->
			<div class="layui-col-md8 layui-col-space5" style="margin: 10px;">

				<div id="" class="layui-col-md4" @click="addNum(7)">
					<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">7</font>
					</div>
				</div>
				<div id="" class="layui-col-md4" @click="addNum(8)">
					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">8</font>
					</div>
				</div>
				<div id="" class="layui-col-md4" @click="addNum(9)">
					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">9</font>
					</div>
				</div>
				<div id="" class="layui-col-md4" @click="addNum(4)">
					<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">4</font>
					</div>
				</div>
				<div id="" class="layui-col-md4" @click="addNum(5)">
					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">5</font>
					</div>
				</div>
				<div id="" class="layui-col-md4" @click="addNum(6)">
					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">6</font>
					</div>
				</div>
				<div id="" class="numberbtn layui-col-md4" @click="addNum(1)">
					<div id="" style="font-size: 25px; text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">1</font>
					</div>
				</div>
				<div id="" class="numberbtn layui-col-md4" @click="addNum(2)">
					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">2</font>
					</div>
				</div>
				<div id="" class="numberbtn layui-col-md4" @click="addNum(3)">
					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #0000FF;height: 50px;">
						<font color="white">3</font>
					</div>
				</div>
			</div>
			<div class="layui-col-md2 layui-col-space5" style="margin: 13px 2px 13px;height: 160px; width: 95px;background-color: #0000FF;" @click="addNum(-1)">
				<div class="">
					<font color="white" style="font-size: 20px;text-align: center;line-height: 150px;margin:20px;">退格</font>
				</div>
			</div>
			<div class="layui-col-md12 layui-col-space5" style="margin-left: 10px;" @click="addNum(0)">
				<div id="" class="numberbtn layui-col-md6" >
					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #009F95;height: 50px;">
						<font color="white">0</font>
					</div>
				</div>
<!--				<div id="" class="numberbtn layui-col-md2" >-->
<!--					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #009F95;height: 50px;">-->
<!--						<font color="white">.</font>-->
<!--					</div>-->
<!--				</div>-->
				<div id="" class="numberbtn layui-col-md2" style="margin-left: 10px;width: 100px;" @click="addNum(10)">
					<div id="" style="font-size: 25px;text-align: center;line-height: 50px; background-color: #FFB800;height: 50px;">
						<font color="white">清除</font>
					</div>
				</div>
			</div>
			
		</div>
		
	
		<!-- 页脚 -->
		<div class="layui-col-md12 layui-bg-red" style="height: 30px;">
			<!-- 营业时间 -->
			<div id="mytime" class="layui-col-md3" style="margin-top: 5px;margin-left: 10px;">
            <!--营业时间：2020-2-22-->
			</div>
			<!-- 操作用户 -->
			<div class="layui-col-md3" style="margin-top: 5px;">
				操作人员：张三
			</div>
			<!-- 当前时间 -->
			<div id="mytime2" class="layui-col-md5" style="margin-top: 5px;">
            <!--18:55:21-->
			</div>
		</div>
	</div>
	<script th:src="@{/plugin/layui/layui.js}" charset="utf-8"></script>
	<script th:src="@{/plugin/layui/layui.all.js}" charset="utf-8"></script>
	<script>
		// 时间展示
		function showTime() {
			var	nowtime = new Date();
			var	year = nowtime.getFullYear();
			var	month = nowtime.getMonth() + 1;
			var	date = nowtime.getDate();
			$("#mytime").html(year + "年" + month + "月" + date +"日");
			$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
			$("#mytime3").val(year + "-" + month + "-" + date +" " +nowtime.toLocaleTimeString());

		};
		// jQuery加载执行时间展示
		$(function(){
			setInterval("showTime()", 1000);
		})

		// vue 业务逻辑
		var app  = new Vue({
				el:"#app",
				data:{
					shiftExchangeBarNumberFore:0,
					shiftExchangeUserFore:1,
					shiftExchangeCashFore:0,
					shiftExchangeAlipayFore:0.00,
					id:1,
					counter_name:"",
					user_account:"李圆圆",
					num:"",
					oldNum:[],
					countN:-1,
					newNum:[]
				},
				mounted:function(){
					this.getPosInfo();
					this.getSumAmountByCash();
					this.getSumAmountByAliPay();
				},
				methods:{
					addNum:function(n){
						/*
						*   -1   0  1
						*   null 7  8
						*        ^
						*
						*   借助C语言指针思想：
						*      当拥有 第一个数据（eg:7）时，指针右移一位（+1，变为0），指向7，
						*      当拥有 第二个数据（eg:8）时，指针右移一位（+1，变为1），指针指向8，
						* */
						var that = this;
						if(n === 10){
							that.oldNum = this.newNum;
							that.num = "";
							that.shiftExchangeCashFore ="";
							that.countN = -1;
							return;
						};
						if(n === -1){ // 参数n=-1：代表退格操作
							if(this.countN>0){ // 若指针指向 1 和其之后数据（例如2，3，4……）
								that.countN = this.countN-1; // 退格，将回到上次指针位置
								//console.log("退格前:"+this.countN)
								that.shiftExchangeCashFore = this.oldNum[this.countN];
								//console.log("退格:"+this.countN)
							}else{ // 若指针指向 0 和之前数据（例如-1，-2，-3……），退格，将指向空值状态
								that.oldNum = this.newNum;
								that.num = "";
								that.shiftExchangeCashFore ="";
								that.countN = -1;
								//console.log("全清:"+this.countN)
							}
							return
						};
						if(n===500){that.shiftExchangeCashFore=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
						if(n===200){that.shiftExchangeCashFore=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
						if(n===100){that.shiftExchangeCashFore=n;that.oldNum[this.countN]=this.num;that.countN++;return;};
						that.num += n+""; // 生成新数据
						that.countN = this.countN+1; // 当指针右移一步（+1），指向该新数据
						//console.log("生成数据后，添加数组前："+this.countN)
						that.shiftExchangeCashFore = Number(this.num); // 让备用金=新数据
						that.oldNum[this.countN] = this.num; // 存入数据数组，方便退格操作
					},
					getPosInfo:function(){
						var that = this;
						axios.get("[[@{/pos/getOneByPK?id=}]]"+this.id)
								.then(resp=>{
									that.shiftExchangeBarNumberFore = resp.data.counter.counter_id;
									that.counter_name = resp.data.counter.counter_name;
								})
					},
					// 获取现金总额
				    getSumAmountByCash:function () {
						var that = this;
						axios.get("[[@{/shiftExchangeInfo/getTotalMoneyByPosIdAndCashPay?pos_id=}]]"+this.id)
						.then(resp=>{
							that.shiftExchangeCashFore = resp.data.data;
						})
					},
				    // 获取支付宝总额
					getSumAmountByAliPay:function () {
						var that = this;
						axios.get("[[@{/shiftExchangeInfo/getTotalMoneyByPosIdAndAliPay?pos_id=}]]"+this.id)
						.then(resp=>{
							that.shiftExchangeAlipayFore = resp.data.data;
							console.log("支付宝总额："+this.shiftExchangeAlipayFore)
						})
					}
					,
					insertForm:function () {
						const params = new FormData();
						params.append("shiftExchangeBarNumberFore",this.shiftExchangeBarNumberFore);
						params.append("shiftExchangeUserFore",this.shiftExchangeUserFore);
						params.append("shiftExchangeCashFore",this.shiftExchangeCashFore);
						params.append("shiftExchageAlipayFore",this.shiftExchangeAlipayFore)
						axios.post("[[@{/shiftExchangeInfo/insert}]]",params)
								.then(resp=>{

								})
					}
				}
			})

	</script>

</body>
</html>